﻿@page "/components/overlay"

<DocsPage>
    <DocsPageHeader Title="Overlay" Component="@nameof(MudOverlay)">
    </DocsPageHeader>
    <DocsPageContent>

        <DocsPageSection>
            <SectionHeader Title="AutoClose">
                <Description>
                    Use the <CodeInline>AutoClose</CodeInline> property to allow users to close the overlay by clicking anywhere on it.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(OverlayUsageExample)">
                <OverlayUsageExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Absolute">
                <Description>
                    The overlay can be contained inside its parent by setting the <CodeInline>Absolute</CodeInline> property along with the <CodeInline>relative</CodeInline> class (or CSS <CodeInline>position: relative</CodeInline> style).
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(OverlayAbsoluteExample)" ShowCode="false">
                <OverlayAbsoluteExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Color">
                <Description>
                    The overlay's default color is transparent, but you can adjust its appearance using either the <CodeInline>DarkBackground</CodeInline> or <CodeInline>LightBackground</CodeInline> properties.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(OverlayColorsExample)" ShowCode="false">
                <OverlayColorsExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Z-Index">
                <Description>
                    Control the stacking order of the overlay relative to other elements by adjusting the <CodeInline>ZIndex</CodeInline> property.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(OverlayZIndexExample)" ShowCode="false">
                <OverlayZIndexExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Loader">
                <Description>
                    The overlay can contain any child content but here it's used to display loading progress.
                </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(OverlayLoaderExample)" ShowCode="false" Block="true">
                <OverlayLoaderExample />
            </SectionContent>
        </DocsPageSection>

        <DocsPageSection>
            <SectionHeader Title="Positioning">
        <Description>
            <p class="my-2">
                By default, <CodeInline>MudOverlay</CodeInline> is automatically placed inside the <CodeInline>MudPopoverProvider</CodeInline> and supports 
                only a single instance, with the most recently created instance taking precedence over previous and scaffolding back down as they close.                
            </p>
            <b>However, this behavior can be overridden in the following ways:</b>
            <ol class="ml-6 my-2">
                <li><b>1. </b>Set <CodeInline>Absolute="true"</CodeInline> to constrain the overlay to a specific section of the page.</li>
                <li><b>2. </b>Apply the <CodeInline>mud-skip-overlay-section</CodeInline> class to exclude an overlay from the singleton effect.</li>
                <li><b>3. </b>Provide <CodeInline>ChildContent</CodeInline> directly within <CodeInline>MudOverlay</CodeInline> to display custom content.</li>
            </ol>
        </Description>
            </SectionHeader>
            <SectionContent Code="@nameof(OverlayPositionExample)" ShowCode="false">
                <OverlayPositionExample />
            </SectionContent>
        </DocsPageSection>
    </DocsPageContent>
</DocsPage>
